<template>
  <div class="visitorpie">
    <div id="visitorpie" class style="width: 90%;height:450px;"></div>
  </div>
</template>

<script>
import echarts from "echarts/lib/echarts";
// 引入柱状图
import "echarts/lib/chart/pie";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";

export default {
  mounted() {
    this.myChart = echarts.init(document.getElementById("visitorpie"));
    this.initData();
  },
  props: ["pieData"],
  data() {
    return {
      map_data: [],
      city_name: [],
    };
  },
  methods: {
    initData() {
      const option = {
        title: {
          text: "用户分布",
          subtext: "",
          x: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: this.city_name,
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "75%",
            center: ["50%", "60%"],
            data: this.map_data.sort(function (a, b) {
              return a.value - b.value;
            }),
            // itemStyle: {
            //   show: true,
            //   shadowBlur: 10,
            //   shadowOffsetX: 0,
            //   shadowColor: "rgba(0, 0, 0, 0.5)",
            // },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: "{b} : {c} ({d}%)",
                },
                labelLine: { show: true },
              },
            },
          },
        ],
      };
      this.myChart.setOption(option);
    },
  },
  watch: {
    pieData: function () {
      this.pieData.result.forEach((element, index) => {
        if (element != 0) {
          //   console.log(this.pieData.cityArr[index], element);
          this.map_data.push({
            value: element,
            name: "" + this.pieData.cityArr[index],
          });
          //   this.$store.state.user.count += element;
          //   console.log(this.$store.state.user.count);
          this.city_name.push(this.pieData.cityArr[index]);
          //   console.log(this.map_data);
        }
      });
      this.initData();
    },
  },
};
</script>

<style lang="less">
@import "../style/mixin";
.visitorpie {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
